<template>
	<div class="container-scope">

    <div class="block-c">

      <div v-for="(item, index) in setting.reward_list" class="item" v-if="setting.reward_list.length">
        <div class="char-key">{{index + 1}}</div>
        <div class="body">

          数量 <a-input-number style="width: 80px;" v-model="item.total"></a-input-number> ，奖励:
          <singleReward v-model="item.reward"></singleReward>

          <div class="item-content">
            <a href="javascript:;" class="delete-text" @click="handleDelete(index)">删除</a>
            <a href="javascript:;" style="margin-left: 20px;" class="delete-text" @click="handleAdd(index)">添加</a>
          </div>
        </div>
      </div>

      <div v-if="!setting.reward_list || !setting.reward_list.length">
        <a-button size="small" type="primary" @click="handleAdd(0)">添加奖励选项</a-button>
      </div>
    </div>

	</div>
</template>
<script>
  import iSwitch from '@/components/ISwitch/ISwitch'
  import SingleReward from '@/components/SingleReward/SingleReward'

	export default {
		components: {
      		SingleReward,
      		iSwitch,
		},
		props: {
			size: {
				default () {
					return 'default'
				}
			},
			value: {
				type: Object
			},
			options: {
				type: Object
			}
		},
		data () {
			return {
				setting: {
		          reward_list: [],
		        }
			}
		},
	    created () {
	      this.setting = this.value || this.setting
	    },
		watch: {
			value (val) {
				this.setting = val || this.setting
		        if (!this.setting.reward_list) {
		          this.$set(this.setting, 'reward_list', [])
		        }
			},
			setting (val) {
				this.$emit('input', val)
			}
		},
		methods: {
			handleDelete (index) {
				this.setting.reward_list.splice(index, 1)
			},
			handleAdd (index) {
		        this.setting.reward_list.splice(index + 1, 0, {
		        	total: '',
		        	reward: {},
		        })
			},
		}
	}
</script>

<style lang="scss" scoped>
.container-scope {
	width: 100%;
  padding-bottom: 20px;
  // border: 1px solid #ddd;
  // padding: 20px 20px;
}
.top-c {
  border-bottom: 1px solid #333;
}
.list {

}

.block-c {
  border: 1px solid #ddd;
  padding: 30px 30px 20px 30px;
  margin-bottom: 20px;
  margin-top: 20px;
  position: relative;
  .block-title {
    position: absolute;
    top: -10px;
    background: white;
    padding: 0px 10px;
  }
}

.item {
	display: flex;
	align-items: center;
	margin-top: 10px;
	border-bottom: 1px solid #e1e1e1;
	padding-bottom: 10px;
	margin-bottom: 10px;
	.char-key {
		margin-right: 10px;
		// padding: 10px;
		border-radius: 50%;
		border: 1px solid #e1e1e1;
		width: 40px;
		height: 40px;
		box-sizing: border-box;
		text-align: center;
		line-height: 40px;
		flex: 0 0 40px;
		background: #f1f1f1;
	}

	.body {
		// border: 1px solid red;
		flex-grow: 1;
	}

	.item-content {
		display: flex;
		align-items: center;
		// border: 1px solid red;
		margin-top: 10px;
		width: 100%;
		.key {
			flex: 0 0 40px;
		}
		.input {
			flex-grow: 1;
		}
	}
}

.select {
  width: 100%;
}
</style>
